import { ref } from "vue";
import dayjs from "dayjs";
import { platformOptions, rechargedOptions } from "./dictionary";
import type { AgisoDetail } from "@/api/agiso";

export const useAgisoDetail = () => {
  const showDrawer = ref(false);
  const detailData = ref<AgisoDetail>({} as AgisoDetail);
  const loading = ref(false);

  const dataList = ref([
    {
      title: "原始数据",
      name: "data",
      data: null
    }
  ]);

  const openDrawer = (data: any) => {
    detailData.value = data;
    showDrawer.value = true;

    // 手动更新 dataList
    dataList.value = [
      {
        title: "原始数据",
        name: "data",
        data: detailData.value.data
      }
    ];
  };

  const closeDrawer = () => {
    showDrawer.value = false;
    detailData.value = {} as AgisoDetail;
    dataList.value = [
      {
        title: "原始数据",
        name: "data",
        data: null
      }
    ];
  };

  const columns = [
    {
      label: "ID",
      prop: "id"
    },
    {
      label: "用户名",
      prop: "user.username",
      cellRenderer: () => {
        return detailData.value.user?.username || "无关联用户";
      }
    },
    {
      label: "用户邮箱",
      prop: "user.email",
      cellRenderer: () => {
        return detailData.value.user?.email || "-";
      }
    },
    {
      label: "平台",
      prop: "platform",
      cellRenderer: () => {
        const platform = detailData.value.platform;
        return (
          platformOptions.find(item => item.value === platform)?.label ||
          platform
        );
      }
    },
    {
      label: "交易单号",
      prop: "tid"
    },
    {
      label: "类型",
      prop: "type"
    },
    {
      label: "充值状态",
      prop: "recharged",
      cellRenderer: () => {
        const recharged = detailData.value.recharged;
        return (
          rechargedOptions.find(item => item.value === recharged)?.label ||
          recharged
        );
      }
    },
    {
      label: "产品代码",
      prop: "product_code"
    },
    {
      label: "周期",
      prop: "period"
    },
    {
      label: "数量",
      prop: "count"
    },
    {
      label: "单价",
      prop: "price"
    },
    {
      label: "金额",
      prop: "amount"
    },
    {
      label: "订单ID",
      prop: "order_id",
      cellRenderer: () => {
        return detailData.value.order_id || "无关联订单";
      }
    },
    {
      label: "时间戳",
      prop: "timestamp"
    },
    {
      label: "创建时间",
      prop: "created_at",
      cellRenderer: () => {
        return detailData.value.created_at
          ? dayjs(detailData.value.created_at).format("YYYY-MM-DD HH:mm:ss")
          : "-";
      }
    }
  ];

  return {
    showDrawer,
    detailData,
    loading,
    columns,
    dataList,
    openDrawer,
    closeDrawer
  };
};
